//  路由表
import { RouterConfig } from "../utils/types";
import { lazy } from "react";
import { RouterListItem, MenuListItem } from "../utils/types";
const routes = JSON.parse(localStorage.getItem("routes") as string);

//  断言  我比编译器更加的知道该类型是什么

// 添加到路由表中
function renderRoute(routes: MenuListItem[]) {
    let newRoutes: RouterListItem[] = [];
    routes?.forEach(item => {
        //  判断是否有子集导航
        if (item.menuType) {
            newRoutes.push({
                path: item.menuPath,
                name: item.menuName,
                component: lazy(() => import(`../views/${item.menuPage}`)),
                children: renderRoute(item.menuChildren as MenuListItem[])
            })
        } else {
            newRoutes.push({
                path: item.menuPath,
                name: item.menuName,
                component: lazy(() => import(`../views/${item.menuPage}`)),
            })
        }
    })

    return newRoutes;
}





let routerConfig: RouterConfig = {
    //  路由模式 浏览器下  不考虑ssr的情况下 
    //  hash 和history模式的区别
    //  1， 从外观上来说 hash模式带#号
    //  2， history模式 是通过h5新增的api pushState
    //    和 popState来控制从路由栈中添加/删除一条记录
    //  3， history模式 页面会发起请求，所以需要后台配合
    //  4， hash模式通过监听hashChange事件 来控制渲染相对应的组件
    mode: "history",
    routes: [
        {
            path: "/",
            redirect: "/login"
        },
        {
            path: "/home",
            name: "home",
            component: lazy(() => import("../views/home")),
            children: renderRoute(routes)
        },
        {
            path: "/login",
            name: "login",
            component: lazy(() => import("../views/login")),
        }
    ]

};


export default routerConfig;


